<template>
  <div ref="tabsContainer" class="tabs_container">
    <div v-if="showArrows" class="tab_arrows" @click="handleScroll({wheelDelta: 120})">
      <i class="iconfont icon-tab_left"></i>
    </div>
    <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
      <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
        <slot></slot>
      </div>
    </div>
    <div v-if="showArrows" class="tab_arrows" @click="handleScroll({wheelDelta: -120})">
      <i class="iconfont icon-tab_right"></i>
    </div>
  </div>
</template>

<script>
const padding = 0 // tag's padding

export default {
  name: 'scrollPane',
  data() {
    return {
      left: 0,
      showArrows: false
    }
  },
  methods: {
    resetWidth() {
      this.left = 0
    },
    changeWrapperWidth() {
      const $tabsContainer = this.$refs.tabsContainer
      const $tabsContainerWidth = $tabsContainer.offsetWidth
      const $wrapper = this.$refs.scrollWrapper
      const $wrapperWidth = $wrapper.offsetWidth
      if ($tabsContainerWidth < $wrapperWidth) {
        if (this.showArrows === false) {
          this.showArrows = true
          this.left = this.left - 44
        }
      } else {
        this.showArrows = false
        this.left = 0
      }
    },
    handleScroll(e) {
      const eventDelta = e.wheelDelta || -e.deltaY * 3
      const $container = this.$refs.scrollContainer
      const $containerWidth = $container.offsetWidth
      const $wrapper = this.$refs.scrollWrapper
      const $wrapperWidth = $wrapper.offsetWidth

      if (eventDelta > 0) {
        this.left = Math.min(0, this.left + eventDelta)
      } else {
        if ($containerWidth - padding < $wrapperWidth) {
          if (this.left < -($wrapperWidth - $containerWidth + padding)) {
            this.left = this.left
          } else {
            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
          }
        } else {
          this.left = 0
        }
      }
    },
    moveToTarget($target) {
      const $container = this.$refs.scrollContainer
      const $containerWidth = $container.offsetWidth
      const $targetLeft = $target.offsetLeft
      const $targetWidth = $target.offsetWidth
      if ($targetLeft < -this.left) {
        // tag in the left
        this.left = -$targetLeft + padding
      } else if (($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) || $targetLeft === -this.left) {
        // tag in the current view
        // eslint-disable-line
      } else {
        // tag in the right
        this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .tabs_container {
    width: 100%;
    display: flex;
    .tab_arrows {
      flex: 0 0 22px;
      height: 39px;
      line-height: 40px;
      text-align: center;
      color: rgba(90, 141, 249, 0.5);
      background-color: #ffffff;
      border-bottom: 1px solid #dbe1e8;
      &:hover {
        color: #5a8df9;
        cursor: pointer;
      }
      &:first-of-type {
        border-right: 1px solid #dbe1e8;
      }
      &:last-of-type {
        border-left: 1px solid #dbe1e8;
      }
    }

    .scroll-container {
      white-space: nowrap;
      position: relative;
      flex: 1;
      overflow: hidden;
      .scroll-wrapper {
        position: absolute;
      }
    }
  }
</style>
